import { defineComponent, reactive, toRefs, onMounted,ref,watch } from 'vue'
import { NSelect, NForm, NFormItem, NModal } from 'naive-ui'
import { Response } from '@/service/modules/common/types'
import { updateDesc } from '@/service/modules/worker-groups'
import { useI18n } from 'vue-i18n'
import { getPros } from '@/service/modules/worker-groups'

const ModDescModal = defineComponent({
  name: 'ModDescModal',
  props: {
    showModal: {
      type: Boolean,
      default: false
    },
    workerId: {
      type: Number,
      required: true
    },
    desc:{
      type: String,
    }
  },
  emits: ['modalShowChange', 'refreshList'],
  setup(props) {
    const state = reactive({
      option:[],
      form: {
        workerId: 0,
        desc: ''
      },
      positiveButtonDisabled: false
    })
    state.form.desc = props.desc || ''
    console.log('props',props);


    onMounted(async () => {
    
    })
   
    
    watch(
      () => props.showModal,
      async () => {
        if (!props.showModal) return
        console.log('props.workerId',props.workerId)

        const {data}  = await getPros({workerId :props.workerId })
        state.option = data.map(item => {
            let obj = {}
            obj.value = item
            obj.label = item
           return obj
        })
        console.log('props.workerId',props.workerId)
      }
    )
    
    const proBelongRef = ref('')

    return { proBelongRef,...toRefs(state) }
  },
  methods: {
    async onPositiveClick() {
      //提交修改项目描述请求
      this.positiveButtonDisabled = true
      this.form.workerId = this.workerId
      const res: Response<any> = await updateDesc({
        ...this.form
      }).catch(() => {
        this.positiveButtonDisabled = false
      })
      if (res.resp_code === 0) {
        this.initData()
        this.$emit('modalShowChange', false)
        this.$emit('refreshList', false)
        this.positiveButtonDisabled = false
      } else {
        this.positiveButtonDisabled = false
      }
    },
    onNegativeClick() {
      this.initData()
      this.$emit('modalShowChange', false)
    },
    initData() {
      this.form.desc = ''
    }
  },
  render() {
    const { t } = useI18n()
    return (
      <NModal
        show={this.showModal}
        mask-closable={false}
        style='width: 400px'
        title={ t('project.worker.editProBelong')}
        bordered={false}
        size='huge'
        preset='dialog'
        positive-text={ t('dialog.positiveText')}
        negative-text={ t('dialog.negativeText')}
        onPositiveClick={this.onPositiveClick}
        onNegativeClick={this.onNegativeClick}
        positiveButtonProps={{
          disabled: this.positiveButtonDisabled
        }}
        onClose={this.onNegativeClick}
      >
        <NForm>
          <NFormItem path='desc' label={ t('project.worker.projectBelong')}>
            <NSelect
              multiple
              filterable
              clearable
              options={this.options}
              size='small'
              style={{ width: '210px' }}
              placeholder={t('project.master.select')}
              defaultValue={''}
              v-model:value={this.proBelongRef}
          />
          </NFormItem>
        </NForm>
      </NModal>
    )
  }
})

export default ModDescModal
